<template>
    <div>
        </el-alert>
        <span class="demonstration">请选择商品分类:</span>
        <el-cascader
          v-model="value"
          :options="options"
          @change="handleChange"
          :props="{ label: 'cat_name', value: 'cat_id' }">
        </el-cascader>
        <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane label="动态参数" name="first">
            <el-button type="primary">添加参数</el-button>
            <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="index" label="#" width="50">
                    </el-table-column>
                    <el-table-column prop="attr_name" label="参数名称">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="priamry" size="small">编辑</el-button>
                            <el-button type="danger" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
         </el-tab-pane>
         <el-tab-pane label="静态属性" name="second">
             <el-table :data="tableDatas" border style="width: 100%">
                    <el-table-column type="index" label="#" width="50">
                    </el-table-column>
                    <el-table-column prop="attr_name" label="参数名称">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="priamry" size="small">编辑</el-button>
                            <el-button type="danger" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
         </el-tab-pane>
       </el-tabs>
    </div>
</template>
<script>
import {getParams,getParamsList} from"../../api/params.js"
export default {
    data() {
        return {
            value:[],
            options:[],
            pagenum:1,
            pagesize:10,
            activeName: "first",
            tableData:[],
            tableDatas:[]
        }
    },
    methods: {
        getPar(){
            getParams({id:this.value[2],sel: "many"}).then(res=>{
                console.log(res);
                this.tableData=res.data.data
            })
            getParams({id:this.value[2],sel: "only"}).then(res=>{
                console.log(res);
                this.tableDatas=res.data.data
            })
        },
        getcate(){
            getParamsList().then(res=>{
                console.log(res);
                this.options=res.data.data
            })
        },
        handleChange(val){
            if (val.length != 3) {
                this.$message({
                    message: "只允许为第三级分类设置相关参数",
                    type: "error",
                });
                this.value = []; // 清空数据
            } else {
                // 选中为三级   向后台请求数据
                this.getPar();
            }
        },
        //编辑
        handleClick(){

        }
    },
    created() {
        this.getcate()
    },
}
</script>
<style lang="scss" scoped>
.aleartA{
    margin: 20px 0;
}
</style>
